<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>封装一个简单的ajax（纯回调）</title>
  </head>
  <body>
    <!-- 
        定义一个sendAjax函数，对xhr的get请求进行封装：
            1、该函数接收4个参数：url（请求地址）、data（参数对象）、success(成功的回调)、error(失败的回调)
     -->
    <script>
      function sendAjax(url, data, success, error) {
        // 实例xhr
        const xhr = new XMLHttpRequest()
        // 绑定监听
        // 处理请求数据
        let str = ''
        for (let key in data) {
          str += `${key}=${data[key]}&`
        }
        str = str.slice(0, -1)
        // 发送请求初始化
        xhr.open('GET', url + '?' + str)
        // 请求格式
        xhr.responseType = 'json'
        // 发送请求
        xhr.send()
        // 判断请求状态
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              success(xhr.response)
            } else {
              error('error!!!')
            }
          }
        }
      }

      sendAjax(
        'https://api.apiopen.top/api/getShortVideo?',
        { page: 0, size: 10 },
        (response) => {
          console.log('成功了', response)
        },
        (err) => {
          console.log('失败了', err)
        }
      )
    </script>
  </body>
</html>
